<template>
	<view>
		<view>
			<view v-if="info.is_clock=='y'">
				<view class="top">
					<image class="icon" src="@/static/tags.png"></image>
					<view class="desc">
						<view class="info">当日打卡信息</view>
						<view class="list" v-if="info.clock_json.length">
							<view class="list-item" v-for="(v,i) in info.clock_json" :key="i">第{{i+1}}次打卡： {{v}}</view>
						</view>

					</view>
				</view>
				<u-empty text=" " mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
					v-if="!info.clock_json.length">
				</u-empty>
				<view class="btn" @click="checkLocation">
					打卡
				</view>
				<view class="top lufei" v-if="info.is_road=='y'">
					<view class="s1">
						<image class="icon" src="@/static/tags.png"></image>
						<view class="desc">
							<view class="info">路费填写</view>
						</view>
					</view>
					<view class="tips"><text style="color: red;">*</text> 你的岗位提供路费，可实报实销</view>
					<view class="shuru">
						<view class="input">
							<u--input placeholder="请输入路费" border="none" v-model="road_fee"
								:customStyle="{Background: '#F3F4F6', padding: '0 15rpx'}"></u--input>
						</view>
					</view>
					<view class="tips" style="padding: 30rpx 0;"><text style="color: red;">*</text> 请上传路费报销凭证</view>
					<u-upload :fileList="fileList1" @afterRead="($event)=>afterRead($event,1)"
						@delete="($event)=>deletePic($event,1)" name="1" :maxCount="1"></u-upload>
					<view class="btn" style="margin-top: 92rpx;margin-bottom: 140rpx;" @click="sumLuFei">
						提交
					</view>
				</view>
			</view>
			<view style="margin: 0 24rpx;" v-if="info.is_clock =='n'">
				<u-cell isLink title="场次" :clickable="false" @click="inputCgabfCI">
					<template #value>
						<view class="right-value">
							<text>{{stage||'请输入场次'}}</text>
						</view>
					</template>
				</u-cell>
				<view class="shuru">
					<view class="remark">信息备注</view>
					<view class="input">
						<u--textarea height="100" placeholder="请输入信息备注" border="none" v-model="note"
							:customStyle="{Background: '#F3F4F6'}"></u--textarea>
					</view>
				</view>
				<view class="btn" style="margin-top: 208rpx;" @click="checkLocation">
					提交
				</view>
				<view class="top lufei" v-if="info.is_road=='y'">
					<view class="s1">
						<image class="icon" src="@/static/tags.png"></image>
						<view class="desc">
							<view class="info">路费填写</view>
						</view>
					</view>
					<view class="tips"><text style="color: red;">*</text> 你的岗位提供路费，可实报实销</view>
					<view class="shuru">
						<view class="input">
							<u--input placeholder="请输入路费" border="none" v-model="road_fee"
								:customStyle="{Background: '#F3F4F6', padding: '0 15rpx'}"></u--input>
						</view>
					</view>
					<view class="tips" style="padding: 30rpx 0;"><text style="color: red;">*</text> 发票或证明文件</view>
					<u-upload :fileList="fileList1" @afterRead="($event)=>afterRead($event,1)"
						@delete="($event)=>deletePic($event,1)" name="1" :maxCount="1"></u-upload>
					<view class="btn" style="margin-top: 92rpx;margin-bottom: 140rpx;" @click="sumLuFei">
						提交
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="noallow">
			你的打卡时间当前不满出勤时长可继续打卡， 特殊情况请忽略此提示
		</view> -->
		<u-modal :show="show" title="场次" @confirm="handleInput">
			<template #default>
				<view class="input" style="width: 100%;">
					<u--input type="number" placeholder="请输入场次" border="none" v-model="temp"
						:customStyle="{Background: '#F3F4F6', padding: '0 15rpx'}"></u--input>
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script>
	import conf from '@/common/config.js';
	export default {
		data() {
			return {
				targetLatitude: 30.531155, // 给定的纬度
				targetLongitude: 104.044655, // 给定的经度
				stage: '',
				note: '',
				road_fee: '',
				temp: '',
				info: {
					clock_json: []
				},
				show: false,
				fileList1: [],
			}
		},
		onLoad() {
			this.initData()

		},

		methods: {
			initData() {
				this.$API.getCurDateJob().then(res => {
					this.info = res.data
				})
			},
			sumLuFei() {
				if (!this.road_fee) return uni.$u.toast('请输入路费')
				if (!this.fileList1.length) return uni.$u.toast('请上传发票或证明文件')
				this.$API.saveRoadFee({
					road_fee: this.road_fee,
					road_image: this.fileList1[0].url.url
				}).then(res => {
					uni.showModal({
						title: '提示',
						content: '路费申请已提交',
						showCancel: false,
						success: function(res) {}
					})

				})
			},
			checkKA(lat, lng) {
				this.$API.checkInOut({
					...this.info.is_clock == 'y' ? {
						lat,
						lng
					} : {
						stage: this.stage,
						note: this.note,
						lat,
						lng
					}
				}).then(res => {
					this.initData()
					uni.showModal({
						title: '提示',
						content: this.info.is_clock == 'y' ? '打卡成功' : '提交成功',
						showCancel: false,
						success: function(res) {}
					})
				}).finally(() => {
					uni.hideLoading()
				})
			},
			checkKB() {
				uni.showLoading({
					title: '提交中',
					mask: true
				})
				this.checkKA()
			},
			checkLocation() {
				if (this.info.is_clock == 'n' && !this.stage) return uni.$u.toast('请输入场次')
				uni.showLoading({
					title: this.info.is_clock == 'y' ? '打卡中' : '提交中',
					mask: true
				})
				let that = this;
				uni.getLocation({
					type: 'gcj02',
					// isHighAccuracy: true,
					success: (res) => {
						const currentLatitude = res.latitude; // 当前纬度
						const currentLongitude = res.longitude; // 当前经度
						// // 计算距离
						// const distance = this.getDistance(currentLatitude, currentLongitude, this.vuex_user
						// 	.lat, this.vuex_user.lng);
						// console.log('计算出的距离:', distance);
						// // 判断距离是否小于500米
						this.checkKA(currentLatitude, currentLongitude)
						// return
						// if (distance <= this.vuex_user.radius) {} else {
						// 	uni.showModal({
						// 		title: '温馨提示',
						// 		content: '不在打卡范围内',
						// 		showCancel: false,
						// 		success: function(res) {}
						// 	})
						// 	uni.hideLoading()
						// }
					},
					fail: () => {
						uni.hideLoading()
						uni.showModal({
							title: '温馨提示',
							content: '请授权地址位置信息',
							showCancel: false,
							success: function(res) {
								uni.openSetting();
							}
						})
					}
				});
			},
			getDistance(lat1, lon1, lat2, lon2) {
				const EARTH_RADIUS = 6378137.0; // 地球半径，单位为米
				const radLat1 = this.toRadians(lat1);
				const radLat2 = this.toRadians(lat2);
				const deltaLat = radLat1 - radLat2;
				const deltaLon = this.toRadians(lon1) - this.toRadians(lon2);

				const a = Math.sin(deltaLat / 2) * Math.sin(deltaLat / 2) +
					Math.cos(radLat1) * Math.cos(radLat2) *
					Math.sin(deltaLon / 2) * Math.sin(deltaLon / 2);

				const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
				const distance = EARTH_RADIUS * c; // 得到的距离单位为米

				return distance;
			},

			// 将角度转化为弧度
			toRadians(degree) {
				return degree * Math.PI / 180;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event, type) {
				console.log(type);
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: conf.url_config + '/api/common/upload',
						filePath: url,
						header: {
							Token: uni.getStorageSync('token')
						},
						name: 'file',
						formData: {},
						success: (res) => {
							let data = JSON.parse(res.data)
							console.log(data.data)
							setTimeout(() => {
								resolve(data.data)
							}, 1000)
						}
					});
				})
			},
			isAuthorized() {
				//定位授权
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.userLocation']) {
							// 未授权或未打开定位
							uni.showModal({
								title: '提示',
								content: '请打开定位并授权给小程序！',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										console.log('用户点击确定');
										// 引导用户去设置打开权限
										uni.openSetting();
									} else if (res.cancel) {
										uni.showToast({
											title: "用户点击取消",
											icon: "none"
										})
									}
								}
							});
							return;
						}
					}
				})
			},
			inputCgabfCI() {
				this.temp = ''
				this.show = true
			},
			cancel() {
				this.show = false
			},
			handleInput() {
				if (!this.temp) return uni.$u.toast('请输入场次')
				this.stage = this.temp
				this.show = false
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.top {
		margin-top: 100rpx;
		display: flex;
		align-items: flex-start;
		padding: 0 46rpx;

		.icon {
			width: 48rpx;
			height: 48rpx;
			margin-top: 4rpx;
		}

		.desc {
			padding-left: 8rpx;
			flex: 1;
			font-weight: 500;
			font-size: 32rpx;
			color: #303133;
			line-height: 56rpx;

			.info {
				margin-bottom: 22rpx;
			}

			.list {
				&-item {
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 36rpx;
					color: #303133;
					line-height: 56rpx;
					padding-top: 30rpx;
				}
			}
		}
	}

	.btn {
		width: 264rpx;
		height: 80rpx;
		background: #30D6C2;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 240rpx;
	}

	.lufei {
		display: flex;
		flex-direction: column;

		.s1 {
			display: flex;
		}
	}

	.tips {
		font-family: PingFang SC, PingFang SC;
		font-weight: 300;
		font-size: 24rpx;
		color: #686868;
		line-height: 40rpx;
	}

	.shuru {
		width: 100%;
		margin-top: 30rpx;
	}



	/deep/ .u-input {
		padding: 0 14rpx !important;
		height: 90rpx;
		background: #F3F4F6;
		border-radius: 8rpx;
		// text-indent: 24rpx;
	}

	.right-value {
		font-weight: 400;
		font-size: 28rpx;
		color: #303133;
		line-height: 50rpx;
	}

	/deep/.u-cell__body {
		padding-left: 0;
		padding-right: 0;
	}

	.noallow {
		padding: 0 118rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 32rpx;
		color: #000000;
		line-height: 56rpx;
		margin-top: 50%;
	}

	.remark {
		font-weight: 400;
		font-size: 28rpx;
		color: #606266;
		line-height: 50rpx;
		margin-bottom: 12rpx;
	}

	/deep/.u-cell__body {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
</style>